import React, { useState,useEffect,useRef } from "react";
import * as S from "../Home/styles";
import { Text, View, StyleSheet,PanResponder, TouchableOpacity, Alert,Platform,LayoutAnimation,Animated } from "react-native";
import { Avatar, HStack,Image, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon,AddIcon,HamburgerIcon,ThreeDotsIcon, Actionsheet,useDisclose,Box} from "native-base";
import {getEventList,eventSort} from "../../services/index";
import Icon from 'react-native-vector-icons/Ionicons';
import DraggableFlatList, {
  ScaleDecorator,
  ShadowDecorator,
  OpacityDecorator,
} from "react-native-draggable-flatlist";
import { ImageMap } from "../../constants/categories";


const Title = ({navigation,route}:any)=>{
  return(
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
      </TouchableOpacity>
      <Text style={styles.titlText}>{route.params.selectItem.name}</Text>
      {/* <TouchableOpacity
        style={[styles.backBtnRight]}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <AddIcon size="5" />
      </TouchableOpacity> */}
    </View>
  )
}

const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {

    
  const url = ImageMap.find((image) => {
    return image.name === item.icon;
  })?.url;

  const item2 = item
  return (
   <View style={styles.item1} 
    
  //  {...panResponder.panHandlers}
   >
    <View>
      <ShadowDecorator color="#000">
        <TouchableOpacity
          onPressIn={drag}
          disabled={isActive}
        >
          <View style={styles.titleRight}>
            {/* <HamburgerIcon size={6} color='#AEAEB2' /> */}
            <View>
              <Image style={{ width:24,height:24}} source={require("../../assets/images/arrow-list.png")} alt="" />
            </View>
            <Text style={styles.title1_text}>{item.name}</Text>
          </View>
        </TouchableOpacity>
      </ShadowDecorator>
      
    </View>

   </View>
  );
};






 const Subset = ({navigation,route}:any) => {

  const [pageList,setPageList] = useState(route.params.selectItem.children)


  const subMit = ()=>{
    let obj = {
      level:route.params.selectLevel + 1,
      parentId:route.params.selectItem.id,
      ids:pageList.map(item=>item.id)
    }
    console.log(route.params.selectItem)
    console.log(obj)
    eventSort(obj).then(res=>{
      console.log(res)
      route.params.loadClassify()
      navigation.goBack()
    })
    
  }
  


  return (
      <S.GrayContainer style={{backgroundColor:'#fff'}}>
        <NativeBaseProvider>
          <View style={{paddingBottom:50, height:'100%'}}>
            <Title navigation={navigation} route={route}/>

            <DraggableFlatList
              showsVerticalScrollIndicator={false}
              style={{height:"90%",paddingHorizontal:16,}}
              data={pageList}
              onDragEnd={({ data }) => {
                setPageList(data)
              }}
              keyExtractor={(item) => item.id}
              renderItem={renderItem}
            />
            <View style={{paddingHorizontal:16}}>
              <TouchableOpacity
                style={[styles.subBtn]}
                onPress={
                  ()=>{
                    subMit()
                  }
                }
              >
                <View>
                  <Text style={styles.subBtnText}>保存</Text>
                </View>
              </TouchableOpacity>
            </View>
            
          </View>
          
        </NativeBaseProvider>
      </S.GrayContainer>
  )
 }


export default Subset

const styles = StyleSheet.create({
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:16,
  },
  backBtn:{
    position:'absolute',
    left:16,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  backBtnRight:{
    
    position:'absolute',
    right:0,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:17,
    fontWeight:'600',
    color:'#000000'
  },
  item1:{
    // paddingVertical:12,
    backgroundColor:'#F5F5F5',
    marginBottom:16,
    borderRadius:16,
  },
  titleRight:{
    // flex:1,
    // width:'100%',
    paddingVertical:20,
    paddingHorizontal:16,
    // marginLeft:10,
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#F5F5F5',
    borderRadius:16,
    // justifyContent:'space-between'
  },
  title1_text:{
    marginLeft:8,
    fontFamily:'HarmonyOS Sans SC',
    fontSize:16,
    fontWeight:'700',
    color:'#1C1C1E'
  },
  subBtn:{
    marginTop:20,
    backgroundColor:'#C6E0F7',
    borderRadius:16,
    height:50,
    alignItems:'center',
    justifyContent:'center'
  },
  subBtnText:{
    color:'#414F66',
    fontSize:14,
    fontWeight:'700'
  },
});